:root {
  --primary: #007AFF;
  --secondary: #5856D6;
  --background: #ffffff;
  --foreground: #000000;
  --muted: #f5f5f5;
  --muted-foreground: #6b7280;
  --border: #e5e7eb;
}

.dark {
  --primary: #0A84FF;
  --secondary: #5E5CE6;
  --background: #000000;
  --foreground: #ffffff;
  --muted: #1c1c1e;
  --muted-foreground: #8e8e93;
  --border: #2c2c2e;
}

body {
  background-color: var(--background);
  color: var(--foreground);
}

.prose {
  max-width: 65ch;
  color: var(--foreground);
  
  h1, h2, h3, h4, h5, h6 {
    color: var(--foreground);
    margin-top: 2em;
    margin-bottom: 1em;
  }
  
  p {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
  }
  
  a {
    color: var(--primary);
    text-decoration: none;
    
    &:hover {
      text-decoration: underline;
    }
  }
  
  code {
    background-color: var(--muted);
    padding: 0.2em 0.4em;
    border-radius: 0.25em;
  }
  
  pre {
    background-color: var(--muted);
    padding: 1em;
    border-radius: 0.5em;
    overflow-x: auto;
  }
}

